<template>
  <view class="container">
  <uni-card>
    <view>{{title}}</view>
    <view>用户名：{{userInfo.username}}</view>
    <view>姓名：{{name}}</view>
    <view>年龄：{{age}}</view>
    <view>城市：{{city}}</view>
    <view>provideValue1：{{provideValue1}}</view>
    <view>provideValue2：{{provideValue2}}</view>
    <view>provideValue3：{{provideValue3}}</view>
    <uni-row>
      <uni-col :span="12"><button @click="gotoIndex">返回首页</button></uni-col>
      <uni-col :span="12"><button @click="gotoLogin">退出登录</button></uni-col>
    </uni-row>

    <view>
      <view></view>
    </view>
    <uni-row>
      <uni-col :span="12"><button @click="testInject1">测试Inject1</button></uni-col>
      <uni-col :span="12"><button @click="testInject">测试testInject</button></uni-col>
    </uni-row>

  </uni-card>
  </view>
</template>

<script setup lang="ts">
import { Action, getOptionsByClass, State,Inject, Prop } from '@gowiny/vue-class'
import { MyComponent } from '@/my/super'
import { ref } from 'vue'
const title = ref('用户信息')
function gotoIndex(){
  uni.navigateTo({
    url:'/pages/index/index'
  })
}
</script>

<script  lang="ts">
class MyProfile extends MyComponent{
  @State("user.userInfo")
  readonly userInfo!:any

  @Prop
  age:number=1

  @Prop
  name:string="-"

  @Prop
  city:string="南宁"
  @Inject
  provideValue1!:string
  @Inject
  provideValue2:string="我是默认值"
  @Inject
  provideValue3:string="我是默认值"

  @Action("user/logout")
  logout!:()=>any
  async gotoLogin(){
    await this.logout()
    console.log('已退出登录，现在跳转到登录页面')
    this.$Router.push({
      name:'login'
    })
  }
  @Inject("testInjectWithDefault")
  testInject1(){
    uni.showModal({
      content:'上级组件没有提供 testInjectWithDefault 方法，我是默认方法'
    })
  }

  @Inject
  declare testInject:()=>void
}
/*
这里展示的是<script lang="ts"> 和 <script setup lang="ts"> 两个标签共用的情况。
最后导出的时候，需要使用 getOptionsByClass 函数转换
*/
export default getOptionsByClass(MyProfile)
</script>

<style>

</style>
